<template>
	<div class="modal-container">
		<el-dialog title="修改分销等级" width="596px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">
			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">选择上级</div>
						<div class="input-item">
							<el-select v-model="shangji"  :clearable="true" filterable remote  placeholder="请选择上级,若为空,则是业务员"
								:remote-method="remoteMethod" :loading="loading">
								<el-option v-for="item in user_list" :key="item.id" :label="item.label"
									:value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="input-item">
							<div class="label">
								分销等级
								<div style="font-size: 10px;">(设置业务员，则上级断开)</div>
							</div>
							<el-select v-model="type" placeholder="请选择分销等级">
								<el-option v-for="item in levelList" :key="item.id" :label="item.title"
									:value="item.id">
								</el-option>
							</el-select>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "refund-audit-modal",
	components: {

	},
	data() {
		return {
			show: false,
			info: {

			},
			type:1,
			levelList: [{
				title:'业务员',
				id:3,
			},{
				title:'一级代理',
				id:2,
			},{
				title:'二级代理',
				id:1,
			},{
				title:'客户',
				id:0,
			} ],
			loading: false,
			shangji:'',
			user_list: []
		};
	},
	computed: {},
	watch: {

	},
	created() {
		//this.query_config()
	},
	methods: {
		init(row) {
			this.info = row
			this.shangji=row.shangji
			let type= row.type
			this.type=type
			this.show = true;
			this.query_user()
		},
		query_config() {
			this.query_user_level()
		},
		query_user() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "users_getList",
					page: 1,
					pageNum: 10
				}
			}).then(res => {
				this.user_list = res.data.list
				this.user_list.forEach(v=>{
					v.label = v.nickname+'('+v.phone+')'
				})
			})
		},
		remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "users_getList",
						page: 1,
						pageNum: 10,
						keyword: query
					}
				}).then(res => {
					this.user_list = res.data.list;
					this.user_list.forEach(v=>{
						v.label = v.nickname+'('+v.phone+')'
					})
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				});
			} else {
				this.query_user();
			}
		},
		query_user_level() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_getLevelList",
					page: 1,
					pageNum: 100
				}
			}).then((res) => {
				if (res.code == 200) {
					let list = res.data.list;
					this.levelList = list;
				}
			})
		},
		on_before_close() {
			this.show = false;
		},
		on_closed() {
			this.form = {
				levelId: '',
			}
		},
		do_submit() {
			console.log(this.type,'上级id',this.shangji);
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "users_updateType",
					id: this.info.id,
					type:this.type,
					shangji:this.shangji
				}
			}).then(res => {
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},

	},
};
</script>

<style scoped lang="less">
.upload-plus {
	width: 140px;
}

/deep/ .el-upload {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin: 0;

	.empty {
		.flex-center();
	}
}

/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;



	}
}

.modal-ctx {
	padding: 30px 50px 0;
	/* max-height: 60vh; */
	overflow-y: auto;
	/* border-bottom: 1px solid #ddd; */

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			min-width: 120px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.upload-ctx {
	margin: 20px 0;
}

.btn-send {}
</style>